<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/mui.css">

	</head>
	<style type="text/css">
		h1 {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
		}
		
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		
		.mui-preview-loading.mui-active {
			display: block;
		}
		
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		
		p img {
			max-width: 100%;
			height: auto;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="mapInfo_title" class="mui-title">气象图例</h1>
		</header>
		<div class="mui-content">
			<div id="mapView" class="mui-slider">
				<div class="mui-slider-item">
					<img id="map_pic" src="../../images/zgdt.png" style="width: 100%; height: 100%;" data-preview-src="" data-preview-group="1" />
				</div>

			</div>
			<div style="text-align: center;margin-top: 25px;">静态图</div>
			<div style="text-align: center;margin-top: 25px;">
				<button id="pre_six" onclick="doTap(-6)">前6小时</button>
				<button id="pre_one" onclick="doTap(-1)">前1小时</button>
				<button id="after_one" onclick="doTap(1)">后1小时</button>
				<button id="after_six" onclick="doTap(6)">后6小时</button>
			</div>
			<div style="text-align: center;margin-top: 25px;">动态图</div>
			<div style="text-align: center;margin-top: 25px;">
				<button id="gif_six" onclick="doTapGif(6)">近6小时</button>
				<button id="gif_twelve" onclick="doTapGif(12)">近12小时</button>
				<button id="gif_twenty_four" onclick="doTapGif(24)">近24小时</button>
				<button id="gif_twenty_four" onclick="doTapGif(48)">近48小时</button>
			</div>
		</div>
		<script src="../../js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../../js/mui.previewimage.js"></script>
		<script type="text/javascript" src="../../js/mui.zoom.js"></script>
		<script src="../../js/global.js"></script>
		<script>
			mui.previewImage();
			$(document).ready(function() {
				initMap();
			});

			var map_time;
			var map_type;
			var type_arr = ['temp', 'rain', 'wind', 'vis','freez'];
			var types_name = ['气温', '云雨', '风势', '能见度','凝冻'];

			function initMap() {
				document.addEventListener('plusready', function() {
					// 在这里调用5+ API 
					map_type = plus.storage.getItem("mapType");
					for(var i = 0; i < type_arr.length; i++) {
						if(type_arr[i] == map_type) {
							document.getElementById('mapInfo_title').innerHTML = types_name[i];
						}
					}
					map_time = Number(plus.storage.getItem("nowTime").replace(/\-/g, ''));
					var map_url = plus.storage.getItem("mapUrl");
					document.getElementById('map_pic').src = map_url;
				}, false);
			}

			var timeChang;

			function doTap(num) {
				plus.nativeUI.showWaiting("loading", {
					width: "100px",
					height: "100px"
				});
				map_time = map_time + num * 3600 * 1000;
				console.log("map_time--" + map_time);
				timeChang = dateFtt("yyyyMMddhh", new Date(map_time));
				console.log("timeChange--" + timeChang);
				var new_url = WEATHER_MAP + map_type + "/guiyang_" + map_type + "_" + timeChang + ".png";
				checkUrl(new_url, num);
			}
			
			function doTapGif(gifNum) {
				plus.nativeUI.showWaiting("loading", {
					width: "100px",
					height: "100px"
				});
				var new_gif_url = WEATHER_MAP + map_type + "/" + gifNum +".gif";
				checkGifUrl(new_gif_url);
			}

			///**************************************时间格式化处理************************************/
			function dateFtt(fmt, date) { //author: meizz   
				var o = {
					"M+": date.getMonth() + 1, //月份   
					"d+": date.getDate(), //日   
					"h+": date.getHours(), //小时   
					"m+": date.getMinutes(), //分   
					"s+": date.getSeconds(), //秒   
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
					"S": date.getMilliseconds() //毫秒   
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}

			//判断url是否有效
			function checkUrl(check_url, num) {
				$.ajax({
					url: check_url,
					type: 'GET',
					complete: function(response) {
						if(response.status == 200) {
							//	alert('有效');
//							mui.toast('加载中，请稍后！\n时间点:' + timeChang);
							document.getElementById('map_pic').src = check_url;
							plus.nativeUI.closeWaiting();
							document.getElementById("pre_one").removeAttribute("disabled");
							document.getElementById("pre_six").removeAttribute("disabled");
							document.getElementById("after_one").removeAttribute("disabled");
							document.getElementById("after_six").removeAttribute("disabled");
						} else {
							plus.nativeUI.closeWaiting();
							if(num < 0) {
								map_time = map_time - num * 3600 * 1000;
								document.getElementById("pre_one").setAttribute("disabled", true);
								document.getElementById("pre_six").setAttribute("disabled", true);
							} else {
								map_time = map_time - num * 3600 * 1000;
								document.getElementById("after_one").setAttribute("disabled", true);
								document.getElementById("after_six").setAttribute("disabled", true);
							}
//							document.getElementById('map_pic').src = "../../images/zgdt.png";
							mui.toast('暂无图片');
						}
					},
					error:function(response) {
						plus.nativeUI.closeWaiting();
					}
				});
			}
			//判断url是否有效
			function checkGifUrl(check_gif_url) {
				$.ajax({
					url: check_gif_url,
					type: 'GET',
					complete: function(response) {
						if(response.status == 200) {
							document.getElementById('map_pic').src = check_gif_url;
							plus.nativeUI.closeWaiting();
						} else {
							plus.nativeUI.closeWaiting();
							mui.toast('暂无动图');
						}
					},
					error:function(response) {
						plus.nativeUI.closeWaiting();
					}
				});
			}
		</script>
	</body>

</html>